<template>

<div v-if="dynamicCommentStatus.isOpen === true">


    <div class="w-full h-full" v-for="(comment, index) in commentList" :key="index">
        <!-- 展示评论区域 -->
        <div class="flex flex-col p-4 dark:text-gray-400">
            <!-- 头像 时间 ip地址 设备 -->
            <div class="flex justify-between">
                <div class="flex">
                    <el-avatar :size="50" src="http://q1.qlogo.cn/g?b=qq&nk=985891315&s=100"> user </el-avatar>
                    <div class="flex flex-col m-1 pl-2">
                        <div class="text-sm ">{{ comment.user.name }} <span class="text-gray-500 text-xs m-1">{{
                            comment.user.time }}</span></div>

                        <div class="flex p-1">
                            <svg t="1748855370992" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                xmlns="http://www.w3.org/2000/svg" p-id="4733" width="20" height="20">
                                <path
                                    d="M512 74.887967c183.767635 0 332.481328 148.713693 332.481328 333.012448 0 132.248963-173.145228 396.746888-269.278008 510.937759-15.93361 18.589212-38.771784 29.211618-63.20332 29.211619-23.900415 0-47.80083-10.622407-63.20332-29.211619-96.6639-114.190871-269.278008-378.157676-269.278008-510.937759 0-183.236515 148.713693-333.012448 332.481328-333.012448z m15.40249 804.116182c103.568465-122.688797 254.406639-367.004149 254.406639-470.572614 0-149.244813-121.095436-270.340249-269.809129-270.340249S241.659751 258.655602 241.659751 408.431535c0 103.568465 150.838174 347.883817 254.406639 470.572614 4.248963 4.780083 9.560166 7.435685 15.40249 7.435685 6.904564 0 12.215768-2.655602 15.93361-7.435685zM512 242.721992c80.73029 0 145.526971 65.327801 145.526971 145.526971s-65.327801 145.526971-145.526971 145.526971C431.26971 533.775934 366.473029 468.448133 366.473029 388.248963c0-80.73029 64.79668-145.526971 145.526971-145.526971z m0 228.912863c45.676349 0 83.385892-37.709544 83.385892-83.385892S557.676349 304.863071 512 304.863071s-83.385892 37.709544-83.385892 83.385892 37.178423 83.385892 83.385892 83.385892z"
                                    p-id="4734"></path>
                            </svg>
                            <div class="text-xs flex items-center">{{ comment.user.ip }} | {{ comment.user.device }}
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 评论按钮图标 -->
                <div class="flex justify-center items-center mr-1">
                    <svg t="1748856171773" @click="textarea = '', replyingId = comment.id"
                        class="icon fill-current text-gray-700  transform transition-all duration-300 hover:text-blue-500 hover:scale-110"
                        viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5809" width="40"
                        height="40">
                        <path
                            d="M853.333333 768c35.413333 0 64-20.650667 64-55.978667V170.581333A63.978667 63.978667 0 0 0 853.333333 106.666667H170.666667C135.253333 106.666667 106.666667 135.253333 106.666667 170.581333v541.44C106.666667 747.285333 135.338667 768 170.666667 768h201.173333l110.016 117.44a42.752 42.752 0 0 0 60.586667 0.042667L651.904 768H853.333333z m-219.029333-42.666667h-6.250667l-115.797333 129.962667c-0.106667 0.106667-116.010667-129.962667-116.010667-129.962667H170.666667c-11.776 0-21.333333-1.621333-21.333334-13.312V170.581333A21.205333 21.205333 0 0 1 170.666667 149.333333h682.666666c11.776 0 21.333333 9.536 21.333334 21.248v541.44c0 11.754667-9.472 13.312-21.333334 13.312H634.304zM341.333333 490.666667a42.666667 42.666667 0 1 0 0-85.333334 42.666667 42.666667 0 0 0 0 85.333334z m170.666667 0a42.666667 42.666667 0 1 0 0-85.333334 42.666667 42.666667 0 0 0 0 85.333334z m170.666667 0a42.666667 42.666667 0 1 0 0-85.333334 42.666667 42.666667 0 0 0 0 85.333334z"
                            fill="currentColor" p-id="5810"> <!-- 修改 fill 为 currentColor 以继承文本颜色 -->
                        </path>
                    </svg>
                </div>
            </div>
            <!--评论内容 -->
            <div class="pl-16 pr-16">
                <div class="mt-2 mb-2 text-xl">{{ comment.content }}</div>
                <div class=" w-full bg-slate-400 h-[1px]"></div>
            </div>
            <!-- 回复评论 -->
            <div class="w-full h-full  p-4" v-if="replyingId === comment.id">
                <div class="flex">
                    <el-avatar :size="50" src="http://q1.qlogo.cn/g?b=qq&nk=985891315&s=100"> user </el-avatar>
                    <div class="text-sm ml-2 flex justify-center items-center">
                        菜鸟拯救世界 <span class="text-xs">回复</span> <span>{{ comment.user.name }}</span>
                        <!-- <div class="text-gray-500 text-xs m-1">2025-3-17 9:26</div> -->
                    </div>
                </div>
                <!-- 输入框 -->
                <div class="w-full h-full pl-12 pr-2">
                    <el-input v-model="textarea" maxlength="30" class="w-full " placeholder="仅登录用户才可发表评论哟!!!"
                        show-word-limit type="textarea" rows="5" />
                </div>
                <!-- 发表评论取消评论按钮 -->
                <div class="flex flex-row-reverse m-4">
                    <!-- 发表评论按钮 -->
                    <button @click="submitReply()"
                        class=" ml-2 bg-blue-500 text-white px-4 py-2 rounded-md hover:bg-blue-600 focus:outline-none focus:ring focus:ring-blue-200">
                        发表评论
                    </button>

                    <!-- 取消评论按钮 -->
                    <button @click="cancelReply"
                        class="bg-gray-300 text-gray-700 px-4 py-2 rounded-md hover:bg-gray-400 focus:outline-none focus:ring focus:ring-gray-200">
                        取消评论
                    </button>
                </div>
            </div>
        </div>

        <!-- 子评论及其回复评论的内容 -->
        <div class="pl-20 flex flex-col  p-1 dark:text-gray-400" v-for="(reply, replyIndex) in comment.replies"
            :key="replyIndex">
            <!-- 头像 时间 ip地址 设备 -->
            <div class="flex justify-between">
                <div class="flex">
                    <el-avatar :size="50" src="http://q1.qlogo.cn/g?b=qq&nk=985891315&s=100"> user </el-avatar>
                    <div class="flex flex-col m-1 pl-2">
                        <div class="text-sm">{{ reply.user.name }} <span class="text-xs">回复</span>
                            <span>{{ comment.user.name }}</span>
                            <div class="text-gray-500 text-xs m-1">{{ reply.user.time }}</div>
                        </div>
                        <div class="flex p-1">
                            <svg t="1748855370992" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                xmlns="http://www.w3.org/2000/svg" p-id="4733" width="20" height="20">
                                <path
                                    d="M512 74.887967c183.767635 0 332.481328 148.713693 332.481328 333.012448 0 132.248963-173.145228 396.746888-269.278008 510.937759-15.93361 18.589212-38.771784 29.211618-63.20332 29.211619-23.900415 0-47.80083-10.622407-63.20332-29.211619-96.6639-114.190871-269.278008-378.157676-269.278008-510.937759 0-183.236515 148.713693-333.012448 332.481328-333.012448z m15.40249 804.116182c103.568465-122.688797 254.406639-367.004149 254.406639-470.572614 0-149.244813-121.095436-270.340249-269.809129-270.340249S241.659751 258.655602 241.659751 408.431535c0 103.568465 150.838174 347.883817 254.406639 470.572614 4.248963 4.780083 9.560166 7.435685 15.40249 7.435685 6.904564 0 12.215768-2.655602 15.93361-7.435685zM512 242.721992c80.73029 0 145.526971 65.327801 145.526971 145.526971s-65.327801 145.526971-145.526971 145.526971C431.26971 533.775934 366.473029 468.448133 366.473029 388.248963c0-80.73029 64.79668-145.526971 145.526971-145.526971z m0 228.912863c45.676349 0 83.385892-37.709544 83.385892-83.385892S557.676349 304.863071 512 304.863071s-83.385892 37.709544-83.385892 83.385892 37.178423 83.385892 83.385892 83.385892z"
                                    p-id="4734"></path>
                            </svg>
                            <div class="text-xs flex items-center">{{ reply.user.ip }} | {{ reply.user.device }}</div>
                        </div>
                    </div>
                </div>
                <div class="flex justify-center items-center mr-4">
                    <svg t="1748856171773" @click="textarea = '', replyingId = reply.id"
                        class="icon fill-current text-gray-700 transform transition-all duration-300 hover:text-blue-500 hover:scale-110"
                        viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5809" width="40"
                        height="40">
                        <path
                            d="M853.333333 768c35.413333 0 64-20.650667 64-55.978667V170.581333A63.978667 63.978667 0 0 0 853.333333 106.666667H170.666667C135.253333 106.666667 106.666667 135.253333 106.666667 170.581333v541.44C106.666667 747.285333 135.338667 768 170.666667 768h201.173333l110.016 117.44a42.752 42.752 0 0 0 60.586667 0.042667L651.904 768H853.333333z m-219.029333-42.666667h-6.250667l-115.797333 129.962667c-0.106667 0.106667-116.010667-129.962667-116.010667-129.962667H170.666667c-11.776 0-21.333333-1.621333-21.333334-13.312V170.581333A21.205333 21.205333 0 0 1 170.666667 149.333333h682.666666c11.776 0 21.333333 9.536 21.333334 21.248v541.44c0 11.754667-9.472 13.312-21.333334 13.312H634.304zM341.333333 490.666667a42.666667 42.666667 0 1 0 0-85.333334 42.666667 42.666667 0 0 0 0 85.333334z m170.666667 0a42.666667 42.666667 0 1 0 0-85.333334 42.666667 42.666667 0 0 0 0 85.333334z m170.666667 0a42.666667 42.666667 0 1 0 0-85.333334 42.666667 42.666667 0 0 0 0 85.333334z"
                            fill="currentColor" p-id="5810"> <!-- 修改 fill 为 currentColor 以继承文本颜色 -->
                        </path>
                    </svg>
                </div>
            </div>
            <!--评论内容 -->
            <div class="pl-16 pr-16">
                <div class="mt-2 mb-2 text-xl">{{ reply.content }}</div>
                <div class=" w-full bg-slate-400 h-[1px]"></div>
            </div>

            <!-- 回复评论 -->
            <div class="w-full h-full  p-4" v-if="replyingId === reply.id">
                <div class="flex">
                    <el-avatar :size="50" src="http://q1.qlogo.cn/g?b=qq&nk=985891315&s=100"> user </el-avatar>
                    <div class="text-sm ml-2 flex justify-center items-center">
                        菜鸟拯救世界 <span class="text-xs">回复</span> <span>{{ reply.user.name }}</span>
                        <!-- <div class="text-gray-500 text-xs m-1">2025-3-17 9:26</div> -->
                    </div>

                </div>
                <!-- 输入框 -->
                <div class="w-full h-full pl-12 pr-2">
                    <el-input v-model="textarea" maxlength="30" class="w-full " placeholder="仅登录用户才可发表评论哟!!!"
                        show-word-limit type="textarea" rows="5" />
                </div>
                <!-- 发表评论取消评论按钮 -->
                <div class="flex flex-row-reverse m-4">
                    <!-- 发表评论按钮 -->
                    <button @click="submitReply()"
                        class=" ml-2 bg-blue-500 text-white px-4 py-2 rounded-md hover:bg-blue-600 focus:outline-none focus:ring focus:ring-blue-200">
                        发表评论
                    </button>

                    <!-- 取消评论按钮 -->
                    <button @click="cancelReply()"
                        class="bg-gray-300 text-gray-700 px-4 py-2 rounded-md hover:bg-gray-400 focus:outline-none focus:ring focus:ring-gray-200">
                        取消评论
                    </button>
                </div>
            </div>
        </div>
    </div>
    <!-- 回复评论 -->
    <div class="w-full h-full  p-4">
        <div class="flex">
            <el-avatar :size="50" src="http://q1.qlogo.cn/g?b=qq&nk=985891315&s=100"> user </el-avatar>
            <div class="dark:text-gray-300 m-1 pl-2 flex justify-center items-center">
                发表评论 :
            </div>
        </div>
        <!-- 输入框 -->
        <div class="w-full h-full pl-12 pr-2">
            <el-input v-model="textarea" maxlength="30" class="w-full " placeholder="仅登录用户才可发表评论哟!!!" show-word-limit
                type="textarea" rows="5" />
        </div>
        <!-- 发表评论取消评论按钮 -->
        <div class="flex flex-row-reverse m-4">
            <!-- 发表评论按钮 -->
            <button @click="submitComment()"
                class=" ml-2 bg-blue-500 text-white px-4 py-2 rounded-md hover:bg-blue-600 focus:outline-none focus:ring focus:ring-blue-200">
                发表评论
            </button>

            <!-- 取消评论按钮 -->
            <button @click="cancelReply()"
                class="bg-gray-300 text-gray-700 px-4 py-2 rounded-md hover:bg-gray-400 focus:outline-none focus:ring focus:ring-gray-200">
                取消评论
            </button>
        </div>
    </div>
    </div>
</template>

<script setup lang="ts">

import { dynamicCommentStatus as useDynamicCommentStatus } from '../../ts/pinia';
import { ref } from 'vue';
const dynamicCommentStatus = useDynamicCommentStatus();

const textarea = ref('') //发表评论的内容

// http://q1.qlogo.cn/g?b=qq&nk=QQ号码&s=100 头像接口
// https://users.qzone.qq.com/fcg-bin/cgi_get_portrait.fcg?uins=985891315  昵称接口


let replyingId = ref(0) // 用于标识当前回复的评论ID
let commentList = ref([
    {
        id: 1,
        user: {
            avatar: 'http://q1.qlogo.cn/g?b=qq&nk=985891315&s=100',
            name: 'AAAA',
            time: '2025-3-17 9:26',
            ip: '河南郑州市',
            device: 'Microsoft Edge'
        },
        content: '终于做出评论系统啦',
        replies: [
            {
                id: 2,
                user: {
                    avatar: 'http://q1.qlogo.cn/g?b=qq&nk=985891315&s=100',
                    name: 'BBB',
                    time: '2025-3-17 9:26',
                    ip: '河南郑州市',
                    device: 'Microsoft Edge'
                },
                content: 'test'
            }
        ]
    }, {
        id: 3,
        user: {
            avatar: 'http://q1.qlogo.cn/g?b=qq&nk=985891315&s=100',
            name: 'CCC',
            time: '2025-3-17 9:26',
            ip: '河南郑州市',
            device: 'Microsoft Edge'
        },
        content: 'test',
        replies: []
    }
])
// 取消评论按钮
function cancelReply() {
    replyingId.value = 0; // 重置回复状态
    textarea.value = ''; // 清空输入框
}
// 提交对别人的回复
function submitReply() {
    console.log('发表评论:', textarea.value);
    console.log('回复的评论ID:', replyingId.value);

}
// 不是回复别人，是直接评论
function submitComment() {
    console.log('发表评论:', textarea.value);
    console.log('回复的评论ID:', 0); //这是直接评论，不是回复别人
}


</script>

<style scoped>
.dark div /deep/ .el-textarea__inner {
    background-color: transparent !important;
    color: #ffffff !important;
}
</style>